<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阻止默认行为与事件冒泡</title>
	<style>
			.father {
				width: 500px;
				height: 500px;
				background-color: red;
			}
			.son {
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			
		</style>
	</head>
	<body>
		<div class="my-type">事件类型检测</div>
		<!-- 阻止默认行为 -->
		<a href="http://www.imooc.com">慕课网</a>
		
		<div class="father">
			<div class="son">一个普普通通的盒子</div>
		</div>
		<script>
			var myDiv = document.querySelector('.my-type');
			function func(e){
				console.log(e.type);
			}
			myDiv.addEventListener('click',func);
			myDiv.addEventListener('mouseover',func);
			myDiv.addEventListener('mouseout',func);
			
			// 阻止默认行为
			var a = document.querySelector('a');
			a.addEventListener('click',function(e){
				e.preventDefault();
			})
			
			
			//  阻止事件冒泡
			var son = document.querySelector('.son');
			son.addEventListener('click',function(e){
				alert("儿子被点击了");
				e.stopPropagation();
			});
			var father = document.querySelector('.father');
			father.addEventListener('click',function(e){
				alert('父亲被点击了');
				e.stopPropagation();
			});
			document.addEventListener('click',function(){
				alert('文档被点击了');
			})
			
		</script>
		
	</body>
</html>